<template>
  <div class="dashboard-container">
    <el-page-header content="首页" />
    <el-card shadow="hover" class="mt-4">
      <div class="welcome-message">
        <h2>欢迎使用系统管理平台</h2>
        <p class="text-gray-500">当前登录时间：{{ currentTime }}</p>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 显示当前时间
const currentTime = ref('')

const formatDate = () => {
  const date = new Date()
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  })
}

onMounted(() => {
  currentTime.value = formatDate()
  // 每秒更新时间
  setInterval(() => {
    currentTime.value = formatDate()
  }, 1000)
})
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
}

.welcome-message {
  text-align: center;
  padding: 40px 0;
}

.text-gray-500 {
  color: #6b7280;
  margin-top: 10px;
}
</style>
